样式表
1
2
| console.log(document.styleSheets)
|
获取包裹元素盒的宽高
我们常说的获取宽高，其实是获取包裹元素盒子的宽高，元素是没有宽高的，只有盒子有宽高
getClientRects()x、y** 是相对于浏览器视口来定的，是个相对的数值getBoundingClintRect() ：返回的是一个对象，里面同样是盒子所占据区域的尺寸
两者不同的地方在于，一个是返回列表，一个是直接返回的对象
获取联网情况
navigator.onLine（联网的时候触发）
navigator.offLine（连不上网的时候触发）
1
2
| window.addEventListener('online',Function, true);
window.addEventListener('offline', Function , true);
|
注意: navigator.onLine 只会在机器未连接到局域网或路由器时返回 false，其他情况下均返回 true。 也就是说，机器连接上路由器后，即使这个路由器没联通网络，navigator.onLine 仍然返回 true。
元素可编辑（contenteditable）
HTML 给全局提供了可以让普通的元素可以像input输入框那种，可以输入文字
1
| <div contenteditable="true">可编辑</div>
|
获取当前语言（navigator.language）
它基于系统语言设置
1
| console.log(navigator.language)
|
使得页面震动（window.navigator.vibrate(pattern)）
1
2
| var successBool = window.navigator.vibrate(pattern);
|
全屏以及退出全屏
document.documentElement.requestFullscreen() （全屏）
document.exitFullscreen() （退出全屏）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| function fullScreenFun(){
let self = this;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled ||
document.webkitFullscreenEnabled || document.msFullscreenEnabled;
if (fullscreenEnabled) {
let de = document.documentElement;
if(self.fullScreenInfo === '打开全屏'){
if( de.requestFullscreen ){
de.requestFullscreen();
}else if( de.mozRequestFullScreen ){
de.mozRequestFullScreen();
}else if( de.webkitRequestFullScreen ){
de.webkitRequestFullScreen();
}
self.fullScreenInfo = '退出全屏'
} else {
if( document.exitFullscreen ){
document.exitFullscreen();
}else if( document.mozCancelFullScreen ){
document.mozCancelFullScreen();
}else if( document.webkitCancelFullScreen ){
document.webkitCancelFullScreen();
}
self.fullScreenInfo = '打开全屏'
}
} else {
self.fullScreenInfo = '浏览器当前不能全屏';
}
}
|
评论加载中